<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #left {
            width: 400px;
            height: 600px;
            border: 1px solid red;
            margin-left: 10px;
            margin-top: 10px;
        }

        #top {
            width: 400px;
            height: 400px;
            position: relative;
        }

        #smallimg {
            width: 400px;
            height: 400px;
        }

        #shadow {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            background-color: rgba(228, 17, 17, 0.5);
        }

        #big {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 500px;
            top: 0;
            border: 1px solid red;
            overflow: hidden;
            border-radius: 50%;
        }

        #bigimg {
            width: 800px;
            height: 800px;
            position: absolute;
        }
        .bottom{
            width: 400px;
            margin-top: 50px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="left" ref="left">
            <div id="top" @mousemove="move" @mouseover="over" @mouseout="out">
                <img id="smallimg"
                    :src="img"
                    draggable="false">
                <div id="shadow" :style="shadowStyle" v-show="flag"></div>


                <div id="big" v-show="flag" ref="big" :style="bigStyle">
                    <img id="bigimg" ref="bigimg"
                        :src="img"
                        draggable="false" :style="bigimgStyle" />
                </div>
            </div>
            <div class="bottom" v-if="info.imglist">
                <div class="item" v-for="item  in  info.imglist.split('|')" @mouseover="changeImg(item)"> 
                    <!-- 连续点击的时候  要注意判断 -->
                    <img :src="item" draggable="false">
                </div>
                
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            info: {},
            flag: false,
            shadowStyle: {//shadow的样式
                left: 0,
                top: 0,
            },
            bigimgStyle: {
                left: 0,
                top: 0
            },
            bigStyle:{
                left:0,
                top:0
            },
            shadowWidth: 200,//遮罩层
            topWidth: 400,//top
            boxLeft: 10,//left距离左边的距离
            boxTop: 10,
            bigimgWidth: 800,//大图的宽度
            bigWidth:400,//
            img:"",
        },
        methods: {
            over() {
                this.flag = true;
            },
            out() {
                this.flag = false;
            },
            move(e) {
                // console.log(e.clientX);
                //计算shadow的位置  
                let x = e.clientX - this.shadowWidth / 2 - this.boxLeft;
                let y = e.clientY - this.shadowWidth / 2 - this.boxTop;

                let max = this.topWidth - this.shadowWidth;//因为是正方形

                if (x <= 0) {
                    x = 0;
                }
                if (y <= 0) {
                    y = 0;
                }

                if (x >= max) {
                    x = max;
                }
                if (y >= max) {
                    y = max;
                }

                //已知x   和x所在的最大长度  big最大的长度   求bigx  

                //  x:400= ?:800

                let bigImgX = x * this.bigimgWidth / this.topWidth;
                let bigImgY = y * this.bigimgWidth / this.topWidth;


                let  bigX = x - (this.bigWidth/2-this.shadowWidth/2);
                let  bigY = y - (this.bigWidth/2 - this.shadowWidth/2);





                Object.assign(this.bigimgStyle, { left: -bigImgX + "px", top: -bigImgY + "px" })
                Object.assign(this.shadowStyle, { left: x + "px", top: y + "px" });
                Object.assign(this.bigStyle,{left:bigX+"px",top:bigY+"px"});




            },
            changeImg(img){
                this.img = img.replace("50x50","400x400");
            },
        },
        mounted() {

            this.shadowWidth = parseFloat(window.getComputedStyle(document.getElementById("shadow"))["width"]);
            console.log(this.shadowWidth);
            this.topWidth = document.querySelector("#top").offsetWidth;
            this.boxLeft = this.$refs.left.offsetLeft;
            this.boxTop = this.$refs.left.offsetTop;
            this.bigimgWidth = parseFloat(window.getComputedStyle(this.$refs.bigimg)["width"]);
            this.bigWidth =parseFloat(window.getComputedStyle(this.$refs.big)["width"]);
        },
        async created() {
            let search = window.location.search;//获取参数
            //console.log(search);
            if (search) {
                let id = search.split("=")[1];//不严谨的取值
                // alert(id); 根据id获取该商品的信息
                let { data: list } = await axios({
                    method: "get",
                    url: "http://localhost:2345/goodsinfos",
                    params: {
                        id
                    }
                })
                this.info = list[0];
                this.img  = this.info.goodsimg;


            } else {
                window.location.href = "list.html";
            }

        }
    })


</script>

</html>